<template>
  <div class="base-content">
    <div class="basic-info">
      <el-form ref="queryForm" :inline="true" :model="queryForm">
        <el-form-item :label="dataList.TagName" prop="name">
          <el-input v-model="queryForm.name" :placeholder="dataList.TagName" />
        </el-form-item>

        <el-form-item :label="dataList.TagType" prop="typeId">
          <dic-drop-down-list
            v-model="queryForm.typeId"
            dict-code="tag"
            :is-all="true"
          ></dic-drop-down-list>
        </el-form-item>
      </el-form>
      <div class="base-content-operate">
        <el-button type="primary" @click="onQuery">{{ btn.Query }}</el-button>
        <el-button @click="cancelForm">{{ btn.Reset }}</el-button>
        <el-button
          v-if="showTableColumn"
          icon="el-icon-plus"
          type="primary"
          @click="onNew"
          >{{ btn.Add }}</el-button
        >
      </div>
      <el-table
        ref="deviceTagTable"
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column v-if="!showTableColumn" type="selection" width="55">
        </el-table-column>
        <el-table-column v-if="showTableColumn" :label="dataList.TagNumber">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.TagName">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceImg">
          <template slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.url"
              :preview-src-list="[scope.row.url]"
            >
            </el-image>
          </template>
        </el-table-column>

        <el-table-column :label="dataList.TagType">
          <template slot-scope="scope">
            {{ scope.row.typeName }}
          </template>
        </el-table-column>

        <el-table-column v-if="showTableColumn" :label="dataList.Status">
          <template slot-scope="scope">
            {{ scope.row.statusName }}
          </template>
        </el-table-column>

        <el-table-column v-if="showTableColumn" :label="dataList.OperatorName">
          <template slot-scope="scope">
            {{ scope.row.operatorName }}
          </template>
        </el-table-column>
        <el-table-column v-if="showTableColumn" :label="dataList.Optime">
          <template slot-scope="scope">
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
        <el-table-column v-if="showTableColumn" :label="dataList.Operation">
          <template slot-scope="scope">
            <div class="base-table-operation">
              <el-link
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >{{ btn.Edit }}</el-link
              >
              <el-link
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >{{ btn.Delete }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>

    <device-tag-add-dialog
      v-if="deviceTagAddDialogVisible"
      ref="deviceTagAddDialog"
      :dialog-form-visible.sync="deviceTagAddDialogVisible"
      @getList="getList"
    ></device-tag-add-dialog>
    <device-tag-edit-dialog
      v-if="deviceTagEditDialogVisible"
      ref="deviceTagEditDialog"
      :dialog-form-visible.sync="deviceTagEditDialogVisible"
      :edit-id="editId"
      @getList="getList"
    ></device-tag-edit-dialog>
  </div>
</template>
<script>
import { getList, deleteRecord } from "../../api/DeviceTag";
import DeviceTagAddDialog from "./DeviceTagAddDialog";
import DeviceTagEditDialog from "./DeviceTagEditDialog";
import DicDropDownList from "../../components/DicDropDownList.vue";
import { mapGetters } from "vuex";
import { GetStaticImgInfo } from "@/api/Base";
export default {
  name: "DeviceTag",
  components: {
    DeviceTagAddDialog,
    DeviceTagEditDialog,
    DicDropDownList,
  },
  props: {
    // 弹窗传参
    showTableColumn: {
      type: Boolean, // 布尔
      default: true, // 必填
    },
    statusId: {
      type: Number, // 数字
      default: -1, // 必填
    },
    // 被选中的行
    checkedRows: {
      type: Array, // 被选中的行
      default: () => [], // 被选中的行
    },
  },
  data() {
    return {
      list: [],
      loading: true,
      formLabelWidth: "100px",
      deviceTagAddDialogVisible: false,
      deviceTagEditDialogVisible: false,
      checkedRowsList: [],
      typeList: [],
      queryForm: {
        name: "",
        num: "",
        typeId: "-1",
        statusId: -1,
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      tHeader: {},
    };
  },
  computed: {
    ...mapGetters(["fileDomain", "fileBucket"]),
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },

  created() {},
  mounted() {
    this.queryForm.statusId = this.statusId;
    this.checkedRowsList = this.checkedRows;
    this.getList();
  },
  methods: {
    getUrl(url) {
      // var res = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${url}`;
      GetStaticImgInfo(url).then((res) => {
        return res.data;
      });
    },
    getList() {
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.pagination.total = res.data.total;
          if (!res.data.dataList) {
            this.list = [];
            this.loading = false;
            return;
          }

          const promises = res.data.dataList.map((element) => {
            return GetStaticImgInfo(element.imgUrl).then((res) => {
              element.url = res.data;
            });
          });

          Promise.all(promises).then(() => {
            this.list = res.data.dataList ? res.data.dataList : [];
            this.pagination.total = res.data.total;
            this.loading = false;
            this.$nextTick(() => {
              for (var i = 0; i < this.checkedRowsList.length; i++) {
                this.list.forEach((item) => {
                  if (item.id === this.checkedRowsList[i].id) {
                    this.$refs.deviceTagTable.toggleRowSelection(item, true);
                  }
                });
              }
            });
          });
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },
    handleDelete(row) {
      var message = this.$t("ModuleDevice.buttons.DeleteTag");
      if (row.isHasDevice) {
        message = this.$t("ModuleDevice.buttons.ConfirmDeleteTag");
      }
      this.$confirm(message, this.$t("ModuleDevice.buttons.Tips"), {
        confirmButtonText: this.$t("ModuleDevice.buttons.Confirm"),
        cancelButtonText: this.$t("ModuleDevice.buttons.Cancel"),
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteRecord({ id: row.id })
            .then((res) => {
              this.getList();
            })
            .catch((res) => {});
        })
        .catch((action) => {});
    },
    handleEdit(row) {
      this.deviceTagEditDialogVisible = true;
      this.editId = row.id;
    },
    onNew() {
      this.deviceTagAddDialogVisible = true;
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
    },
  },
};
</script>
<style scoped>
</style>
